<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* Echarts (https://github.com/apache/echarts)
* vue-echarts (https://github.com/ecomfe/vue-echarts)
* vue-iclient (https://github.com/SuperMap/vue-iclient)
* PapaParse (https://github.com/mholt/PapaParse)
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-10/mapbox-gl-enhance.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_componentsTimeLine_Vue"></title>
        <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
        <script
            include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
            src="../../dist/mapboxgl/include-mapboxgl.js"
        ></script>
        <style>
            #main {
                margin: 0 auto;
                width: 100%;
                height: 100%;
            }
            .sm-component-time-line {
                position: absolute;
                bottom: 20px;
                width: 100%;
                z-index: 1000;
            }
            .sm-component-text {
              position: absolute;
              top: 20px;
              display: flex;
              width: 100%;
              height:40px;
              margin: 0 auto;
              background: transparent !important;
              z-index: 1000;
            }
            .sm-component-text span {
              margin: 0 auto;
            }
            .chart-wrapper {
                position: absolute;
                bottom: 100px;
                left: 50px;
                width:600px;
                z-index: 1000;
            }
            .chart-wrapper .sm-component-text {
              position: static;
              height: 30px;
            }
            .sm-component-chart {
                width:600px;
                height: 300px;
            }
            .sm-component-chart .sm-component-collapse-card__content {
                width:600px;
                height: 300px;
            }
        </style>
    </head>

    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
        <div id="main">
        <sm-text  title="2005到2016地震发生情况" :font-style='{ fontSize: "27px", fontWeight: 700, textAlign: "center"}' text-color="#e9e9e9"></sm-text>
        
            <sm-web-map :map-options="mapOptions">
                <sm-heatmap-layer :data="mapData" :layer-style="heatMapStyle" ></sm-heatmap-layer>
            </sm-web-map>
            <div class="chart-wrapper">
              <sm-text :title="chartTitle" :font-style='{ fontSize: "16px", textAlign: "center"}' text-color="#e9e9e9"></sm-text>
              <sm-chart icon-class="" v-bind="options" :dataset="dataset"  background="rgba(255, 255, 255, 0)"></sm-chart>
            </div>
            <sm-time-line :data="data" :play-interval="2000" :control-style="controlStyle" :checkpoint-style="controlStyle" :label="controlStyle"  @timelinechanged="timelineChanged" background="rgba(255, 255, 255, 0)"></sm-time-line>
        </div>

        <script>
        var heatMapStyle = new SuperMap.Components.commontypes.HeatMapStyle({
                   "heatmap-weight": [
                      "interpolate",
                      ["linear"],
                      ["get", "value"],
                      6, 2,
                      9, 18
                    ],
                    "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3],
                    "heatmap-color": [
                        "interpolate",
                        ["linear"],
                        ["heatmap-density"],
                        0,
                        "rgba(33,102,172,0)",
                        0.2,
                        "#333eb5",

                        0.5,
                        "green",
                        0.9,
                        "yellow",
                        1,
                        "red",
                    ],
                    "heatmap-radius": 16,
            });
            new Vue({
                el: '#main',
                data() {
                    var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
                    var attribution =
                        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
                        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
                        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
                    return {
                        chartTitle: '2005年1-12月地震次数',
                        options: {
                            seriesType: 'bar',
                            datasetOptions: [
                                {
                                    seriesType: 'bar',
                                    xField: 'date',
                                    yField: 'value',
                                    sort: 'unsort'
                                }
                            ],
                            options: {
                                yAxis: {
                                    name: '',
                                    axisLine: {
                                        color: '#90979c',
                                        lineStyle: { color: '#90979c' }
                                    },
                                    axisLabel: {
                                        color: '#90979c',
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei'
                                    },
                                    show: true,
                                    splitLine: {
                                        lineStyle: {
                                            width: 0.3,
                                            type: 'solid'
                                        },
                                        show: false
                                    },
                                    splitArea: {
                                        show: false
                                    },
                                    nameGap: 5,
                                    nameLocation: 'end',
                                    type: 'value',
                                    nameTextStyle: {
                                        padding: [0, 0, 5, 0]
                                    }
                                },
                                xAxis: {
                                    data: [],
                                    axisLine: {
                                        color: '#90979c',
                                        lineStyle: { color: '#90979c' }
                                    },
                                    axisLabel: {
                                        rotate: 0,
                                        color: '#90979c',
                                        fontFamily: 'MicrosoftYaHei'
                                    },
                                    show: true,
                                    name: '',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    splitLine: {
                                        lineStyle: {
                                            type: 'solid'
                                        },
                                        show: false
                                    },
                                    nameGap: 2,
                                    nameLocation: 'end',
                                    type: 'category'
                                },
                                grid: {
                                    left: 50,
                                    right: 50,
                                    top: 10,
                                    bottom: 35
                                },
                                series: [
                                    {
                                        name: '次数',
                                        type: 'bar',
                                        itemStyle: {
                                            normal: {
                                                color: new echarts.graphic.LinearGradient(
                                                    0, 0, 0, 1,
                                                    [
                                                        { offset: 0, color: 'red' },
                                                        { offset: 0.5, color: 'yellow' },
                                                        { offset: 1, color: 'red' }
                                                    ]
                                                ),
                                                barBorderRadius: 15
                                            },
                                            emphasis: {
                                                color: new echarts.graphic.LinearGradient(
                                                    0, 0, 0, 1,
                                                    [
                                                        { offset: 0, color: 'red' },
                                                        { offset: 0.7, color: 'yellow' },
                                                        { offset: 1, color: 'red' }
                                                    ]
                                                )
                                            },
                                        },
                                        label:{
                                          normal:{
                                            show: true,
                                            position:"top",
                                            smart:false,
                                            textStyle:{
                                              color: '#e9e9e9'
                                            }
                                          }
                                        },
                                        barWidth: 20,
                                        bargap: 5
                                    }
                                ],
                                textStyle: {
                                    fontFamily: 'Microsoft YaHei Light'
                                }
                            }
                        },
                        dataset: {
                            maxFeatures: 20,
                            url: '',
                            type: 'geoJSON',
                            geoJSON: {
                                type: 'FeatureCollection',
                                features: []
                            }
                        },
                        data: [
                            '2005',
                            '2006',
                            '2007',
                            '2008',
                            '2009',
                            '2010',
                            '2011',
                            '2012',
                            '2013',
                            '2014',
                            '2015',
                            '2016'
                        ],
                        controlStyle:{color:'#fd381b', borderColor: '#fd381b'},
                        mapData: {
                            type: 'FeatureCollection',
                            features: null
                        },
                        heatMapStyle:heatMapStyle,
                        mapOptions: {
                            container: 'map',
                            style: {
                                version: 8,
                                sources: {
                                    'raster-tiles': {
                                        attribution: attribution,
                                        type: 'raster',
                                        tiles: [
                                            host +
                                                '/iserver/services/map-china/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'
                                        ],
                                        tileSize: 256
                                    }
                                },
                                layers: [
                                    {
                                        id: 'simple-tiles',
                                        type: 'raster',
                                        source: 'raster-tiles',
                                        minzoom: 0,
                                        maxzoom: 22
                                    }
                                ]
                            },
                            center: [ 102.57, 31.71],
                            zoom: 4
                        }
                    };
                },
                created() {
                    this.requestData();
                },
                methods: {
                    requestData() {
                        var _this = this;
                        $.get('../data/chinaEarthquake.csv', function(csvstr) {
                            var result = Papa.parse(csvstr, { skipEmptyLines: true, header: true }).data;
                            var data = _this.createChartData(result);

                            _this.chartData = data.chartData;
                            _this.heatPoints = data.heatPoints;
                            var year = _this.data[0];
                            var chartFeatures = _this.crateChartFeatures(_this.chartData, year);
                            var heatFeatures = _this.createHeatMapFeatures(_this.heatPoints, year);
                            _this.dataset.geoJSON = {
                                type: 'FeatureCollection',
                                features: chartFeatures
                            };
                            _this.mapData = {
                                type: 'FeatureCollection',
                                features: heatFeatures
                            };
                        });
                    },
                    createChartData(result) {
                        var chartData = {};
                        var heatPoints = [];
                        for (var i = 0; i < result.length; i++) {
                            var item = result && result[i];

                            if (!item || !item.date) {
                                continue;
                            }
                            var date = new Date(item.date);
                            var year = date.getFullYear();
                            var month = date.getMonth() + 1;
                            var point = [parseFloat(item.X), parseFloat(item.Y), parseFloat(item.level)];
                            //每一年的地震数据
                            if (heatPoints[year]) {
                                heatPoints[year].push(point);
                            } else {
                                heatPoints[year] = [point];
                            }
                            //每年每发生的地震次数
                            if (!chartData[year]) {
                                chartData[year] = {};
                                chartData[year][month] = 1;
                            } else {
                                if (!chartData[year][month]) {
                                    chartData[year][month] = 1;
                                } else {
                                    chartData[year][month]++;
                                }
                            }
                        }
                        return { chartData: chartData, heatPoints: heatPoints };
                    },
                    crateChartFeatures(chartData, year) {
                        var features = [];
                        var data = chartData[year];
                        for (var month in data) {
                            var date = parseInt(month / 10) === 0 ? '0' + month : month;
                            var feature = {
                                type: 'Feature',
                                properties: { value: data[month], date: date }
                            };
                            features.push(feature);
                        }
                        return features;
                    },
                    createHeatMapFeatures(heatPoints, year) {
                        var features = [];
                        var data = heatPoints[year];
                        for (var i = 0; i < data.length; i++) {
                            if (data[i] && data[i][1] <= 85) {
                                var feature = {
                                    type: 'Feature',
                                    geometry: {
                                        coordinates: [parseFloat(data[i][0]), parseFloat(data[i][1])],
                                        type: 'Point'
                                    },
                                    properties: { value: data[i][2], id: i }
                                };
                                features.push(feature);
                            }
                        }
                        return features;
                    },
                    timelineChanged(val) {
                        var currentIndex = val.currentIndex;
                        var year = this.data[currentIndex];
                        var chartFeatures = this.crateChartFeatures(this.chartData, year);
                        var heatFeatures = this.createHeatMapFeatures(this.heatPoints, year);
                        this.dataset.geoJSON = {
                            type: 'FeatureCollection',
                            features: chartFeatures
                        };
                        this.mapData = {
                            type: 'FeatureCollection',
                            features: heatFeatures
                        };
                        this.chartTitle = year + '年1-12月地震次数'
                    }
                }
            });
        </script>
    </body>
</html>
